<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Custom Render Function</title>
    <style>
        .container {
            margin: 0 auto;
            text-align: center;
        }

        .gauge_container {
            text-align: left;
            height: 450px;
            display: inline-block;
            border: 1px solid #ccc;
            margin: 40px 5px 0 5px;
        }

        .gauge {
            width: 300px;
            height: 200px;
            display: inline-block;
            -webkit-transform: translate3d(0, 0, 0);
        }

        .controls {
            text-align: left;
        }

        li {
            padding: 10px 0 0 0;
        }

        li.refresh {
            border-top: 1px solid #eee;
            border-bottom: 1px solid #eee;
            padding-top: 15px;
            padding-bottom: 15px;
        }

        label {
            font-family: Arial;
            display: inline-block;
            width: 65px;
            margin: 0 0 5px 0;
            text-align: right;
            padding: 5px;
            color: #919191;
        }

        input {
            font-weight: bold;
            font-size: 13px;
            padding: 10px;
            border: 1px solid #ccc;
            margin: 5px;
        }

        input[disabled=disabled] {
            font-weight: normal;
            font-size: 11px;
            padding: 0 0 0 10px;
            margin: 0px;
            color: #777777;
            border-color: transparent;
            background: #fff;
        }

        a:link.button,
        a:active.button,
        a:visited.button,
        a:hover.button {
            margin: 0px 5px 0 2px;
            padding: 7px 13px;
        }
    </style>
</head>

<body>
    <div id="jg1" style="width: 200px; height: 150px;"></div>
    <a href="#" id="jg1_refresh" class="button grey">Random Refresh</a>
    <script src="../raphael.min.js"></script>
    <script src="../justgage.js"></script>
    <script>
        /** Random integer  */
        function getRandomInt(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        document.addEventListener("DOMContentLoaded", function (event) {
            var maxx = 100;

            var jg1 = new JustGage({
                id: "jg1",
                value: 50,
                min: 0,
                max: maxx,
                title: "Score",
                label: "",
                pointer: true,
                textRenderer: function (val) {
                    return (val + '/' + maxx);
                },
                onAnimationEnd: function () {
                    console.log('f: onAnimationEnd()');
                }
            });

            document.getElementById('jg1_refresh').addEventListener('click', function () {
                jg1.refresh(getRandomInt(0, 100));
                return false;
            });
        });
    </script>
</body>

</html>